<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery和CSS3超酷3D翻牌式倒计数特效</title>
    <link rel="stylesheet" type="text/css" href="css/countdown.css">
    <style type="text/css">
        .count {
            box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.2);
            height: 300px;
            left: 45%;
            line-height: 300px;
            margin: -150px 0 -100px;
            -moz-perspective: 500px;
            -webkit-perspective: 500px;
            perspective: 500px;
            position: absolute;
            text-align: center;
            top: 50%;
            -moz-transform: translateZ(0);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            width: 200px;
        }

        @media screen and (max-width: 480px) {
            .count {
                top: 70%;
                left: 30%
            }
        }

        .count span {
            background: #202020;
            color: #f8f8f8;
            display: block;
            font-size: 250px;
            left: 0;
            position: absolute;
            top: 0;
            text-shadow: 0 1px 0 #282828, 0 2px 0 #1e1e1e, 0 3px 0 #141414, 0 4px 0 #0a0a0a, 0 5px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
            -moz-transform-origin: 0 150px 0;
            -webkit-transform-origin: 0 150px 0;
            transform-origin: 0 150px 0;
            width: 100%;
        }

        .count span:before {
            border-bottom: 2px solid #000;
            content: "";
            left: 0;
            position: absolute;
            width: 100%;
        }

        .count span:after {
            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .count .small {
            font-size: 175px;
        }

        .count .top {
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
            box-shadow: inset 0 2px rgba(0, 0, 0, 0.9), inset 0 3px 0 rgba(255, 255, 255, 0.4);
            height: 50%;
            overflow: hidden;
        }

        .count .top:before {
            bottom: 0;
        }

        .count .top:after {
            background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
            background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
        }

        .count .bottom {
            border-radius: 10px;
            height: 100%;
        }

        .count .bottom:before {
            top: 50%;
        }

        .count .bottom:after {
            border-radius: 10px;
            background: -moz-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0));
            background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0));
            background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0));
        }

        .count.down .top {
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
            height: 50%;
        }

        .count.down .top.current {
            -moz-transform-style: flat;
            -webkit-transform-style: flat;
            transform-style: flat;
            z-index: 3;
        }

        .count.down .top.next {
            -moz-transform: rotate3d(1, 0, 0, -90deg);
            -ms-transform: rotate3d(1, 0, 0, -90deg);
            -webkit-transform: rotate3d(1, 0, 0, -90deg);
            transform: rotate3d(1, 0, 0, -90deg);
            z-index: 4;
        }

        .count.down .bottom {
            border-radius: 10px;
        }

        .count.down .bottom.current {
            z-index: 2;
        }

        .count.down .bottom.next {
            z-index: 1;
        }

        .count.down.changing .bottom.current {
            box-shadow: 0 75px 5px -20px rgba(0, 0, 0, 0.3);
            -moz-transform: rotate3d(1, 0, 0, 90deg);
            -ms-transform: rotate3d(1, 0, 0, 90deg);
            -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
            -moz-transition: -moz-transform 0.35s ease-in, box-shadow 0.35s ease-in;
            -o-transition: -o-transform 0.35s ease-in, box-shadow 0.35s ease-in;
            -webkit-transition: -webkit-transform 0.35s ease-in, box-shadow 0.35s ease-in;
            transition: transform 0.35s ease-in, box-shadow 0.35s ease-in;
        }

        .count.down.changing .top.next,
        .count.down.changed .top.next {
            -moz-transition: -moz-transform 0.35s ease-out 0.35s;
            -o-transition: -o-transform 0.35s ease-out 0.35s;
            -webkit-transition: -webkit-transform 0.35s ease-out;
            -webkit-transition-delay: 0.35s;
            transition: transform 0.35s ease-out 0.35s;
            -moz-transform: none;
            -ms-transform: none;
            -webkit-transform: none;
            transform: none;
        }

        .count.up .top {
            height: 50%;
        }

        .count.up .top.current {
            z-index: 4;
        }

        .count.up .top.next {
            z-index: 3;
        }

        .count.up .bottom.current {
            z-index: 1;
        }

        .count.up .bottom.next {
            box-shadow: 0 75px 5px -20px rgba(0, 0, 0, 0.3);
            -moz-transform: rotate3d(1, 0, 0, 90deg);
            -ms-transform: rotate3d(1, 0, 0, 90deg);
            -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
            z-index: 2;
        }

        .count.up.changing .top.current {
            -moz-transform: rotate3d(1, 0, 0, -90deg);
            -ms-transform: rotate3d(1, 0, 0, -90deg);
            -webkit-transform: rotate3d(1, 0, 0, -90deg);
            transform: rotate3d(1, 0, 0, -90deg);
            -moz-transition: -moz-transform 0.2625s ease-in, box-shadow 0.2625s ease-in;
            -o-transition: -o-transform 0.2625s ease-in, box-shadow 0.2625s ease-in;
            -webkit-transition: -webkit-transform 0.2625s ease-in, box-shadow 0.2625s ease-in;
            transition: transform 0.2625s ease-in, box-shadow 0.2625s ease-in;
        }

        .count.up.changing .bottom.next,
        .count.up.changed .bottom.next {
            box-shadow: 0 0 0 0 transparent;
            -moz-transition: box-shadow 0.175s cubic-bezier(0.375, 1.495, 0.61, 0.78) 0.35s, -moz-transform 0.35s cubic-bezier(0.375, 1.495, 0.61, 0.78) 0.35s;
            -o-transition: box-shadow 0.175s cubic-bezier(0.375, 1.495, 0.61, 0.78) 0.35s, -o-transform 0.35s cubic-bezier(0.375, 1.495, 0.61, 0.78) 0.35s;
            -webkit-transition: box-shadow 0.175s cubic-bezier(0.375, 1.495, 0.61, 0.78), -webkit-transform 0.35s cubic-bezier(0.375, 1.495, 0.61, 0.78);
            -webkit-transition-delay: 0.35s, 0.35s;
            transition: box-shadow 0.175s cubic-bezier(0.375, 1.495, 0.61, 0.78) 0.35s, transform 0.35s cubic-bezier(0.375, 1.495, 0.61, 0.78) 0.35s;
            -moz-transform: rotate3d(1, 0, 0, 0);
            -ms-transform: rotate3d(1, 0, 0, 0);
            -webkit-transform: rotate3d(1, 0, 0, 0);
            transform: rotate3d(1, 0, 0, 0);
        }

        .count.changed .top.current,
        .count.changed .bottom.current {
            display: none;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background: #202020;
            background-origin: 50% 50%;
            -moz-background-size: cover;
            -o-background-size: cover;
            -webkit-background-size: cover;
            background-size: cover;
            font-family: "Oswald";
        }
    </style>

</head>

<body>

    <div class="count"></div>

    <script id="count-template" type="text/template">
	<span class="current top <%= currentSize %>"><%= time %></span>
	<span class="next top <%= nextSize %>"><%= nextTime %></span>
	<span class="current bottom <%= currentSize %>"><%= time %></span>
	<span class="next bottom <%= nextSize %>"><%= nextTime %></span>
	</script>

    <!-- <script src='js/underscore-1.5.2-min.js'></script> -->
    <script src=' https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.1/underscore-min.js'></script>

    <script>
        Countdown = function () {
            _(this).bindAll('update', 'executeAnimation', 'finishAnimation');
            this.setVars.apply(this, arguments);
            this.update();
        };
        Countdown.prototype = {
            duration: 1000,
            setVars: function (time, el, template) {
                this.max = time;
                this.time = time;
                this.el = el;
                this.template = _(template.innerHTML).template();
                this.delta = -1;
            },
            update: function () {
                this.checkTime();
                this.setSizes();
                this.setupAnimation();
                _(this.executeAnimation).delay(20);
                _(this.finishAnimation).delay(this.duration * 0.9);
                _(this.update).delay(this.duration);
            },
            checkTime: function () {
                this.time += this.delta;
                if (this.time === 0)
                    this.delta = 1;
                if (this.time === this.max)
                    this.delta = -1;
                this.delta === 1 ? this.toggleDirection('up', 'down') : this.toggleDirection('down', 'up');
                this.nextTime = this.time + this.delta;
            },
            toggleDirection: function (add, remove) {
                this.el.classList.add(add);
                this.el.classList.remove(remove);
            },
            setSizes: function () {
                this.currentSize = this.getSize(this.time);
                this.nextSize = this.getSize(this.nextTime);
            },
            getSize: function (time) {
                return time > 9 ? 'small' : '';
            },
            setupAnimation: function () {
                this.el.innerHTML = this.template(this);
                this.el.classList.remove('changed');
            },
            executeAnimation: function () {
                this.el.classList.add('changing');
            },
            finishAnimation: function () {
                this.el.classList.add('changed');
                this.el.classList.remove('changing');
            }
        };
        new Countdown(12, document.querySelector('.count'), document.querySelector('#count-template'));
    </script>
</body>

</html>